<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>Kate</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="container-fluid">
    学生信息表
    <!-- Button trigger modal -->
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        新增学生
    </button>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Select">
        查询学生
    </button>

    <table class="table table-bordered">
        <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>成绩</th>
            <th style="width:100px">操作</th>

        </tr>
<!--        <tr th:each="student : ${students}">-->
<!--            <th scope="row" data-th-text="${student.id}"></th>-->
<!--            <td data-th-text="${student.name}"></td>-->
<!--            <td data-th-text="${student.sex}"></td>-->
<!--            <td data-th-text="${student.score}"></td>-->
<!--        </tr>-->
        </thead>
        <tbody id="studentTb">
        </tbody>
    </table>
</div>

<div class="modal fade" tabindex="-1" role="dialog"  id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">学生信息</h4>
            </div>
            <div class="modal-body">
                <form id="formStudent">
                    <input hidden="hidden" id="id"/>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                    </div>

                    <div class="form-group">
                        <label for="sex">性别</label>
                        <select class="form-control" id="sex" name="sex">
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="score">成绩</label>
                        <input type="text" class="form-control" id="score" name="score" placeholder="成绩">
                    </div>
                </form>
<!--                表单结束-->




            </div>
            <div class="modal-footer">


                <button type="button" class="btn btn-primary" onclick="addStudent()">新增学生</button>
<!--                <button type="button" class="btn btn-primary" onclick="updateStudent()">保存</button>-->
<!--                <button type="button" class="btn btn-primary" onclick="editStudent()">保存</button>-->
                <button type="button" class="btn btn-primary" onclick="updateStudent()">更新</button>



            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="modal fade" tabindex="-1" role="dialog" id="Select">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">查询信息</h4>
            </div>
            <div class="modal-body">
                <form id="selectStudent">
                    <div class="form-group">
                        <label for="name">输入学生姓名</label>
                        <input type="text" class="form-control" id="name1" name="name" placeholder="姓名">

                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <div class="form-group">
                    <label for="no1">学号</label>
                    <input type="text" class="form-control" id="no1" name="no" placeholder="请勿输入">
                </div>
                <div class="form-group">
                    <label for="password1">密码</label>
                    <input type="password" class="form-control" id="password1" name="password" placeholder="请勿输入">
                </div>

                <div class="form-group">
                    <label for="sex1">性别</label>
                    <select class="form-control" id="sex1" name="请勿输入">
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="score1">成绩</label>
                    <input type="text" class="form-control" id="score1" name="score" placeholder="请勿输入">
                </div>
                <button type="button" class="btn btn-primary" onclick="selectStudent()">查询</button>
            </div>
        </div>
    </div>
</div>








<script src="/js/bootstrap.min.js"></script>
<script type="text/javascript">

    function deleteStudent(id){
        if(confirm("确定要删除该学生信息吗？")){
            $.ajax({
                url:"/webapi/student/delete/"+id,
                method:"delete"
            }).done(function (){
                loadTable();
            });
        }
    }
    function addStudent(){
        console.log("test")
        var data = $("#formStudent").serialize();
        // console.log(data)
        $.ajax({
            url: "/webapi/student/insert",
            method: "post",
            data: data
        }).done(function (){
            console.log("end")
            loadTable();
            $("#myModal").modal("hide");
        });
    }



    function editStudent(id){
        $("#myModal").modal("show");
        $.ajax({
            url:"/webapi/student/get/"+id
        }).done(function(rs){
            $("#id").val(rs.id);
            $("#name").val(rs.name);
            $("#password").val("");
            $("#score").val(rs.score);
            $("#sex").val(rs.sex);

        })
    }


    /**
     * 增加数据
     */
    // function updateStudent() {
    //     var data = $("#formStudent").serialize();
    //     $.ajax({
    //         url:"/webapi/student/update",
    //         method:"put",
    //         data:data
    //     }).done(function(){
    //         loadTable();
    //         $('#myModal').modal("show");
    //     })
    // }
    function updateStudent() {
        var student = {
            id: $("#id").val(),
            name: $("#name").val(),
            password: $("#password").val(),
            sex: $("#sex").val(),
            score: $("#score").val()
        };

        $.ajax({
            url: "/webapi/student/update",
            method: "put",
            contentType: "application/json",
            data: JSON.stringify(student)
        }).done(function () {
            loadTable();
            $("#myModal").modal("hide");
        });
    }

    // function selectStudent(){
    //     var data=$("#selectStudent").serialize();
    //     $.ajax({
    //         url:"/webapi/student/select",
    //         method:"get",
    //         data:data
    //     }).done(function (rs){
    //         var stu=rs;
    //         loadTable();
    //         $("#no1").val(stu.no);
    //         $("#age1").val(stu.age);
    //         if(stu.sex=='1')
    //             $("#sex1").val("男");
    //         else
    //             $("#sex1").val("女");
    //         $("#score1").val(stu.score);
    //
    //
    //     })
    // }
    function selectStudent() {
        var data=$("#selectStudent").serialize();
        $.ajax({
            url: "/webapi/student/select", // 确保这个URL与@GetMapping中定义的一致
            method: "GET",
            data: data
        }).done(function (response) { // 使用'response'代替'rs'以提高清晰度
            var stu = response;
            loadTable(); // 确保你的代码中有定义这个函数来更新表格
            if (stu) {
                $("#no1").val(stu.no);
                $("#age1").val(stu.age);
                $("#sex1").val(stu.sex === '1' ? "男" : "女"); // 使用三元运算符来判断性别的显示
                $("#score1").val(stu.score);
            } else {
                alert("学生未找到！"); // 如果没有找到学生，提示用户
            }
        })
    }



    function loadTable(){
        $.ajax({
            url: "/webapi/student/list"
        }).done(function (rs) {
            var len = rs.length;
            var html = "";
            for (var i = 0; i < len; i++) {
                var item = rs[i];
                html += "<tr>"
                    + "<td>" + item.id + "</td>"
                    + "<td>" + item.name + "</td>"
                    + "<td>" + item.sex + "</td>"
                    + "<td>" + item.score + "</td>"
                    // + "<td> <a href='#' onclick='editStudent(" + item.id + ")'>编辑</a></td>"
                    + "<td> <a href='#' onclick='editStudent(" + item.id + ")'>编辑</a> | <a href='#' onclick='deleteStudent(" + item.id + ")'>删除</a></td>"
                    + "</tr>";
            }
            $("#studentTb").html(html);
        });
    }

    $(function (){
        loadTable();
    });

</script>
</body>
</html>